<template>
	<div class="disinfo">
		<div class="discon">
			<el-input type="textarea" v-model="dis.con_dis"></el-input>
			<el-button type="primary" size="small" @click="setdiscuss">提交</el-button>
		</div>
		<div class="dislist" v-if="discuss.length != 0">
			<h2>{{discuss.length}}条评论:</h2>
			<div class="dis_div" v-for="value,index in discuss" :key="index">
				<div class="discuss" v-if="value.type == 't2'">
					<img :src="value.userpic" alt="">
					<div class="dis_div_header">
						<p v-html="value.username"></p>
						<p>{{parseTimeNew(value.create_time)}}</p>
					</div>
					<el-button type="info" size="mini" @click="onReply(value)">回复</el-button>
					<div class="dis_div_content" v-html="value.content"></div>
					<div class="editreply" :id="'editreply'+value.id">
						<el-input type="textarea" v-model="reply.reply_con"></el-input>
						<div class="overflow">
							<el-button type="danger" icon="el-icon-delete" circle size="mini" @click="hidedis"></el-button>
							<el-button type="success" icon="el-icon-check" circle size="mini" @click="setdis(value)"></el-button>
						</div>
					</div>
				</div>
				<div class="reply" v-else>
					<img :src="value.userpic" alt="">
					<div class="dis_div_header">
						<p v-html="value.username"></p>
						<p>{{parseTimeNew(value.create_time)}}</p>
					</div>
					<el-button type="info" size="mini" @click="onReply(value)">回复</el-button>
					<div class="dis_div_content" v-html="value.content"></div>
					<div class="editreply" :id="'editreply'+value.dis_id+ value.id">
						<el-input type="textarea" v-model="reply.reply_con"></el-input>
						<div class="overflow">
							<el-button type="danger" icon="el-icon-close" circle size="mini" @click="hidedis"></el-button>
							<el-button type="success" icon="el-icon-check" circle size="mini" @click="setdis(value)"></el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "discuss",
		data() {
			return {}
		},
		props: {
			discuss: {
				type: Array,
				default: []
			},
			dis: {
				type: Object,
				default: {
					id: "",
					userid: "",
					con_dis: "",
					article_id: ""
				}
			},
			reply: {
				type: Object,
				default: {
					id: "",
					userid: "",
					reply_con: "",
					reply_id: "",
					dis_id: "",
					article_id: ""
				}
			}
		},
		methods: {
			parseTimeNew(date) {
				var ndate = new Date(date)
				let type = 'yyyy-MM-dd hh:mm:ss'
				const o = {
					'M+': ndate.getMonth() + 1, // 月份
					'd+': ndate.getDate(), // 日
					'h+': ndate.getHours(), // 小时
					'm+': ndate.getMinutes(), // 分
					's+': ndate.getSeconds(), // 秒
					'q+': Math.floor((ndate.getMonth() + 3) / 3), // 季度
					'S': ndate.getMilliseconds() // 毫秒
				}
				if (/(y+)/.test(type)) type = type.replace(RegExp.$1, (ndate.getFullYear() + '').substr(4 - RegExp.$1
					.length))
				for (const k in o) {
					if (new RegExp('(' + k + ')').test(type)) type = type.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[
						k]) : (('00' + o[k]).substr(('' + o[k]).length)))
				}
				return type
			},
			async setdiscuss() {
				let {
					data
				} = await this.$axios.post(
					'/blog/users/addoreditdiscuss', this.dis);
				console.log(data);
				if (data.data == "新建成功") {
					this.$router.go();
				}
			},
			onReply(disobj) {
				var arr = document.getElementsByClassName('editreply');
				for (var i = 0; i < arr.length; i++) {
					arr[i].style.display = 'none';
				}
				if (disobj.type == 't2') {
					//首次有人想回复一层评论
					document.getElementById('editreply' + disobj.id).style.display = 'block';
				}else if (disobj.type == 't3') {
					//评论回复
					document.getElementById('editreply' + disobj.dis_id + disobj.id).style.display = 'block';
				}
			},
			hidedis(){
				var arr = document.getElementsByClassName('editreply');
				for (var i = 0; i < arr.length; i++) {
					arr[i].style.display = 'none';
				}
			},
			async setdis(disobj){
				if (disobj.type == 't2') {
					//首次有人想回复一层评论
					this.reply.dis_id = disobj.id;
				}else if (disobj.type == 't3') {
					//评论回复
					this.reply.reply_id = disobj.id;
					this.reply.dis_id = disobj.dis_id;
					console.log(this.reply);
				}
				let {
					data
				} = await this.$axios.post(
					'/blog/users/addoreditreply', this.reply);
				console.log(data);
				if (data.data == "新建成功") {
					this.$router.go();
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.disinfo {
		padding-bottom: 100px;

		.discon {
			margin: 10px auto;
			padding: 20px;
			width: 70%;
			overflow: hidden;
			border: 1px solid;

			.el-textarea {
				margin-bottom: 20px;
			}

			.el-button {
				float: right;
			}
		}

		.dislist {
			margin: 10px auto;
			padding: 10px;
			width: 70%;

			h2 {
				margin-bottom: 20px;
			}

			.dis_div {
				margin-bottom: 10px;

				img {
					width: 40px;
					height: 40px;
				}

				.reply {
					margin-left: 60px;
				}

				.editreply {
					margin-left: 4%;
					display: none;

					.el-textarea {
						margin-top: 10px;
						margin-bottom: 10px;
					}
				}

				.dis_div_header {
					display: inline-block;
					vertical-align: top;
					margin-left: 20px;

					p {
						font-size: 14px;
						font-weight: bold;
						margin-bottom: 5px;

						&:nth-last-child(1) {
							font-weight: normal;
							color: #2c2d33;
							margin-bottom: 0px;
						}
					}
				}

				.el-button {
					float: right;
				}

				.dis_div_content {
					width: 96%;
					height: auto;
					background-color: #ccc;
					border-radius: 10px;
					padding: 10px;
					margin-left: 4%;
				}
			}
		}
	}
</style>
